<template>
  <div class="one">
    <el-button :plain="true" @click="open2">Success</el-button>
    <el-container>
      <el-main>
        <div class="common-layout">
          <el-container>
            <el-header>
              <span>老人姓名：<el-input v-model="input" style="width: 150px; margin-right:50px" placeholder="请输入老人姓名" /></span>
              <span>身份证号码：<el-input v-model="input" style="width: 150px; margin-right:50px"
                  placeholder="请输入档案编号" /></span>
              <span>状态：<el-select v-model="value" placeholder="Select" size="large"
                  style="width: 150px; margin-right:50px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select></span>
              <span style="display:inline-block">类型：<el-select v-model="values" placeholder="Select" size="large"
                  style="width: 150px; margin-right:50px">
                  <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
                </el-select></span>
              <span>入住时间：
                <el-date-picker v-model="value2" style="width: 250px;" type="datetimerange" :shortcuts="shortcuts"
                  range-separator="-" start-placeholder="入住时间" end-placeholder="退住时间" />
              </span>
              <el-button type="primary" style="margin-left: 20px;">查询</el-button>
            </el-header>
            <el-main>
              <el-button type="primary" style="margin-bottom: -150px; margin-left: 900px;">导出</el-button>
              <el-table :data="tableData" border style="width: 100%; margin-top:100px"
                :default-sort="{ prop: 'name', order: 'ascending' }" @selection-change="handleSelectionChange">
                <el-table-column prop="exam_name" label="序号" />
                <el-table-column prop="classify" label="老人姓名" width="150px" />
                <el-table-column prop="is_end" label="入住号" width="100px"></el-table-column>
                <el-table-column prop="created_by" label="类型" width="80px" />
                <el-table-column prop="zhuang" label="状态" width="80px" />
                <el-table-column prop="hu" label="护照等级" width="80px" />
                <el-table-column prop="start_time" sortable label="开始时间" width="200px" />
                <el-table-column prop="end_time" sortable label="结束时间" width="200px" />
                <el-table-column prop="days" label="入住天数" width="80px" />
                <el-table-column fixed="right" label="操作" width="180">
                  <template #default>
                    <el-button link type="primary" size="small" @click="handleClick">入住记录</el-button>
                    <el-button link type="primary" size="small" @click="zhu">重新入住</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-text class="mx-1" size="small">共2条数据</el-text>
                <el-pagination background layout="prev, pager, next" :total="1000" style="float:right" />
            </el-main>
          </el-container>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
  
  
<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { ElNotification } from "element-plus";
import { ElMessage } from 'element-plus';
import { useRouter } from "vue-router";

const value = ref('')
const options = [{ value: '入住中', label: '入住中' }, { value: '归档', label: '归档' }, { value: '外出', label: '外出' }, { value: '退住', label: '退住' },]

const values = ref('')
const option = [{ value: '居家', label: '居家' }, { value: '入院', label: '入院' }]
const tableData = [
  {
    exam_name: "1",
    classify: "金花婆婆",
    start_time: "2024-00-16 8：00：07",
    end_time: "2024-00-16 12：00：00",
    is_end: 32424,
    created_by: "入院",
    zhuang: '离院',
    hu: '四级护照',
    days: '10',
    creation_time: "2024-00-16 8：00：07",
  },
  {
    exam_name: "2",
    classify: "金花婆婆",
    start_time: "2024-00-16 8：00：07",
    end_time: "2024-00-16 12：00：00",
    is_end: 32424,
    created_by: "入院",
    zhuang: '离院',
    hu: '四级护照',
    days: '10',
    creation_time: "2024-00-16 8：00：07",
  },]
  const router = useRouter();
  const zhu = () => {
     router.push('/zhu')
     console.log(12);
  }
  const open2 = () => {
  ElMessage.success('成功')
}
</script>
  
  
<style scoped>
.el-menu-vertical-demo {
  width: 200px;
  margin-top: -25px;
}

.one {
  height: 100%;
  width: 100%;
}
</style>